<template>
  <div class="special_purple">
    <div class="special_purple_header">
      <div class="special_purple_header_select">
        <Select :index="2" @selected="handleSelected" theme="blue"></Select>
      </div>
    </div>
    <div class="container">
      <div class="left">
        <Card title="收结情况" class="left_top">
          <CloseCase />
        </Card>
        <Card title="平均审理天数趋势" class="left_middle">
          <AverageTrialDaysChart />
        </Card>
        <Card title="长期未结案" class="left_bottom">
          <LongOutstanding />
        </Card>
      </div>
      <div class="right">
        <Card title="核心质效指标" class="right_top">
          <div class="core-quality-box">
            <div class="core-quality-effect">
              <ItemCard
                style="width: 19%"
                v-for="item in coreData.splice(0, 5)"
                :key="item.title"
                :item="item"
              />
            </div>
            <div class="core-quality-effect">
              <ItemCard
                style="width: 19%"
                v-for="(item, i) in coreData.splice(0)"
                :key="item.title"
                :item="item"
                :style="{ visibility: i == 5 ? 'hidden' : '' }"
              />
            </div>
          </div>
        </Card>
        <div class="right_bottom">
          <Card title="人员情况" class="bottom_left">
            <div class="right-btns">
              <span
                class="btn"
                :class="typeIndex == 1 ? 'active' : ''"
                @click="handleClick(1)"
              >
                民初案件
              </span>
              <span
                class="btn"
                :class="typeIndex == 2 ? 'active' : ''"
                @click="handleClick(2)"
              >
                诉前调解案件
              </span>
            </div>
            <PonserDetail :selectId="typeIndex" />
          </Card>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed, onMounted, ref } from "vue";
import Card from "./components/Card.vue";
import Select from "@/components/Select.vue";
import AverageTrialDaysChart from "./components/AverageTrialDaysChart.vue";
import CloseCase from "./components/CloseCase.vue";
import LongOutstanding from "./components/LongOutstanding.vue";
import ItemCard from "./components/ItemCard.vue";
import PonserDetail from "./components/PonserDetail.vue";
import {getDepartZxzb} from '@/api/bmfx'
import { getDate } from '@/utils/index.js'
const { getYearStartDate, getYearEndDate } = getDate()

const coreData = computed(()=>{
  return [
  {
    title: "上诉率",
    indexVal:departZxzb.value.ssl,
    target: "8.04%~11.26%",
    sort: "1",
  },
  {
    title: "申诉申请再审率",
    indexVal:departZxzb.value.sssqzsl,
    target: "1.42%~2.12%",
    sort: "2",
  },
  {
    title: "再审改判-发回重审比",
    indexVal:departZxzb.value.zsgpfhcsb,
    target: "0.15~0.31",
    sort: "3",
  },
  {
    title: "再审审查询问(听证)率",
    indexVal:departZxzb.value.zsscxwtzl,
    target: "9%~50%",
    sort: "4",
  },
  {
    title: "审限内结案率",
    indexVal:  departZxzb.value.sxnjal,
    target: "89%~94%",
    sort: "5",
  },
  {
    title: "平均结案时间",
    indexVal: departZxzb.value.pjjasj,
    target: "53~72天",
    sort: "6",
  },
  {
    title: "超12个月\n未结案件比",
    indexVal: departZxzb.value.c12ywjajb,
    target: "0.05%~0.23%",
    sort: "7",
  },

  {
    title: "诉前调解成功\n分流率",
    indexVal:departZxzb.value.sqtjcgfll,
    target: "11%~18%",
    sort: "8",
  },

  {
    title: "调解率",
    indexVal: departZxzb.value.tjl,
    target: "19%~30%",
    sort: "9",
  },

  {
    title: "诉前调解案件申请执行率",
    indexVal:  departZxzb.value.sqtjsqzxl,
    target: "15%~27%",
    sort: "10",
  },
]
});

// 获取质效指标
const departZxzb=ref({})
const queryDepartZxzb = () => {
  const params = {
    starttime: getYearStartDate(),
    endtime: getYearEndDate(),
  }
  getDepartZxzb(params).then((res) => {
  departZxzb.value = res.data.data[0]
});
}

onMounted(() => {
  queryDepartZxzb()
})


const typeIndex = ref(1);
const handleClick = (type) => {
  typeIndex.value = type;
};
</script>

<style lang="scss" scoped>
.special_purple {
  width: 100vw;
  height: 100vh;
  background: url("./images/bg.png");
  background-size: cover;

  .special_purple_header {
    width: 100%;
    height: 88px;
    background: url("@/assets/image/posture/sp_header.png");
    background-size: cover;
    .special_purple_header_select {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: flex-end;
      padding-right: 20px;
      align-items: flex-end;
      box-sizing: border-box;
    }
  }
  .container {
    padding: 24px 32px 0;
    display: flex;
    justify-content: space-between;
    height: calc(100% - 88px);
    overflow: hidden;
    .left {
      width: 36.5%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-right: 30px;
      padding-bottom: 40px;
      box-sizing: border-box;
      .left_top {
        height: 32%;
      }
      .left_middle {
        height: 32%;
      }
      .left_bottom {
        height: 32%;
      }
    }
    .right {
      flex: 1;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .right_top {
        flex: 1;
      }
      .right_bottom {
        height: 35%;
        .bottom_left {
          position: relative;
          .right-btns {
            position: absolute;
            top: 10px;
            right: 10px;
            display: flex;
            border-radius: 5px;
            overflow: hidden;
            .btn {
              width: 110px;
              cursor: pointer;
              padding: 8px;
              color: #fff;
              font-size: 14px;
              line-height: 14px;
              text-align: center;
              background: rgba(21, 154, 255, 0.16);
              border: 1px solid transparent;
              &:nth-child(1).active {
                border: 1px solid #00c1e0;
                border-radius: 5px 0 0 5px;
                background: none;
              }
              &:nth-child(2).active {
                border: 1px solid #00c1e0;
                border-radius: 0 5px 5px 0;
                background: none;
              }
            }
          }
        }
      }
    }
  }
}
.core-quality-box {
  width: 100%;
  height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
}
.core-quality-effect {
  width: 100%;
  height: 50%;
  display: flex;
  // justify-content: space-between;
  padding: 16px 0;
  gap: 10px;
}
</style>
